<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <script src="jquery-3.1.1.js"></script>
    <title>选择</title>
    <style>
        div{
            float: left;
        }
        div:nth-child(1){
            background-color: pink;
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        div:nth-child(2){
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: red;
            text-align: center
        }
        ul{
            list-style: none;
            border: 1px solid blue;
            padding: 0;
            margin: 0;
            display: none;
        }
        li{
            border: 1px dashed red;            
        }
        p{
            margin: 0;
        }
    </style>
</head>
<body>
    <div>选择项目：</div>
    <div class="wei">
        <p>未选择</p>
        <ul>
            <li>html5</li>
            <li>css3</li>
            <li>js</li>
            <li>jQuery</li>
        </ul>
    </div>
</body>
</html>
<script>
    var index=0; 
    $('.wei').mouseover(function(){
        $('ul').css('display','block');        
    });
    $('li').hover(function(){
        $(this).css('background-color','green');
    },function(){
        $(this).css('background-color','white');
    });
    $('li').click(function(){
        $('p').html($(this).html());
        $('ul').hide();
    });
</script>